<template>
  <div class="drawerList">
    <ul
      @click="isdrawer"
      class="openList"
      v-show="!onRoutes && !isDrawer ? false : true"
      :class="$i18n.locale === 'en' ? 'openList-en' : ''"
    >
      <li
        :class="isDrawer ? 'el-icon-d-arrow-right' : 'el-icon-d-arrow-left'"
      ></li>
      <li
        v-text="
          isDrawer ? $t('main.closePlaylist') : $t('public.openAPlayerList')
        "
      ></li>
    </ul>
    <el-drawer
      :title="$t('public.playlist')"
      :with-header="false"
      :visible.sync="isDrawer"
      class="drawer-box"
      size="100%"
    >
      <div class="container">
        <el-tabs
          class="box content"
          v-model="activeName"
          @tab-click="handleClick"
        >
          <el-tab-pane
            :label="$t('public.playlist')"
            name="first"
            class="first"
          >
            <div class="checkAll">
              <el-checkbox v-model="checkAll" @change="handleCheckAllChange">{{
                checkAll ? $t("main.deselectAll") : $t("main.selectAll")
              }}</el-checkbox>
              <el-button
                size="small"
                type="primary"
                @click="openDialog('addSingles')"
                >{{ $t("main.addToSingleClip") }}</el-button
              >
              <el-button
                @click="openConfirm('clearPlayList')"
                class="clearBtn"
                size="small"
                >{{ $t("public.clearingPlaylists") }}</el-button
              >
            </div>
            <!-- @current-change="handleCurrentChange" -->
            <el-table
              ref="playlistTable"
              class="singleTable"
              :data="playLists"
              height="450"
              highlight-current-row
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection"></el-table-column>
              <el-table-column
                :label="
                  playLists
                    ? $t('main.single') + '(' + playLists.length + ')'
                    : $t('main.single') + '(0)'
                "
                min-width="30%"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <div
                    class="singName ellipsis"
                    :class="
                      currentSong.trackId == scope.row.trackId && playing
                        ? 'playing'
                        : ''
                    "
                    @click="play('playList', scope.row)"
                  >
                    <span class="row-index">
                      <span class="playIndex">{{ scope.$index + 1 }}</span>
                      <img
                        src="@/assets/images/playGif.gif"
                        class="playGif pointer"
                      />
                      <svg-icon name="pause" class="icon icon-pause" />
                    </span>
                    <!-- <svg-icon name="play" class="icon playGif"/> -->
                    <span
                      v-text="
                        $i18n.locale === 'zh'
                          ? scope.row.trackCtitle || scope.row.trackTitle
                          : scope.row.trackTitle
                      "
                    ></span>
                  </div>
                </template>
              </el-table-column>
              <!-- 删除 -->
              <el-table-column min-width="6%">
                <template slot-scope="scope">
                  <span
                    @click.stop="openConfirm('cancelComposition', scope.row)"
                    class="icon el-icon-delete-solid"
                  ></span>
                </template>
              </el-table-column>
              <!-- 喜欢按钮 -->
              <el-table-column min-width="6%">
                <template slot-scope="scope">
                  <svg-icon
                    @click.stop="isLikeSingle(scope.row, scope.$index)"
                    :name="scope.row.likeState ? 'is-like' : 'like'"
                    class="icon icon-like"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="timing"
                :label="$t('main.duration')"
                min-width="18%"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                min-width="40%"
                :label="$t('main.theirAlbum')"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <p class="ellipsis" v-if="scope.row.musicAlbum">
                    <span
                      v-text="
                        $i18n.locale === 'zh'
                          ? scope.row.musicAlbum.catalogueCname ||
                            scope.row.musicAlbum.catalogueName
                          : scope.row.musicAlbum.catalogueName
                      "
                    ></span>
                  </p>
                  <p v-else>
                    <span v-text="$t('public.noInformation')"></span>
                  </p>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane :label="$t('main.playHistory')" name="second">
            <div class="checkAll">
              <el-checkbox v-model="checkAll" @change="handleCheckAllChange">{{
                checkAll ? $t("main.deselectAll") : $t("main.selectAll")
              }}</el-checkbox>
              <el-button
                size="small"
                type="primary"
                @click="openDialog('addSingles')"
                >{{ $t("main.addToSingleClip") }}</el-button
              >
              <el-button
                @click="openConfirm('deletePlayRecord')"
                class="clearBtn"
                size="small"
                >{{ $t("main.clearPlaybackRecord") }}</el-button
              >
            </div>
            <!-- @current-change="handleCurrentChange" -->
            <el-table
              ref="recordListTable"
              class="singleTable"
              :data="recordList"
              height="450"
              highlight-current-row
              @selection-change="handleSelectionChange"
              v-loading="fullscreenLoading"
              v-el-table-infinite-scroll="load"
              infinite-scroll-disabled="isPage"
              infinite-scroll-delay="120"
              infinite-scroll-immediate="false"
            >
              <el-table-column type="selection"></el-table-column>
              <el-table-column
                :label="$t('main.single') + '(' + recordList.length + ')'"
                min-width="30%"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <div
                    class="singName ellipsis"
                    :class="
                      currentSong.trackId == scope.row.trackId && playing
                        ? 'playing'
                        : ''
                    "
                    @click="play('playRecord', scope.row)"
                  >
                    <span class="row-index">
                      <span class="playIndex">{{ scope.$index + 1 }}</span>
                      <img
                        src="@/assets/images/playGif.gif"
                        class="playGif pointer"
                      />
                      <svg-icon name="pause" class="icon icon-pause" />
                    </span>
                    <!-- <svg-icon name="play" class="icon playGif"/> -->
                    <span
                      v-text="
                        $i18n.locale === 'zh'
                          ? scope.row.trackCtitle || scope.row.trackTitle
                          : scope.row.trackTitle
                      "
                    ></span>
                  </div>
                </template>
              </el-table-column>
              <!-- 删除 -->
              <el-table-column min-width="6%">
                <template slot-scope="scope">
                  <span
                    @click="openConfirm('cancelRecord', scope.row)"
                    class="icon el-icon-delete-solid"
                  ></span>
                </template>
              </el-table-column>
              <!-- 喜欢按钮 -->
              <el-table-column min-width="6%">
                <template slot-scope="scope">
                  <svg-icon
                    @click.stop="isLikeSingle(scope.row, scope.$index)"
                    :name="scope.row.likeState ? 'is-like' : 'like'"
                    class="icon icon-like"
                  />
                  <!-- <svg-icon name="like" class="icon icon-like" /> -->
                </template>
              </el-table-column>
              <el-table-column
                prop="timing"
                :label="$t('main.duration')"
                min-width="18%"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                min-width="40%"
                :label="$t('main.theirAlbum')"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <p class="ellipsis" v-if="scope.row.musicAlbum">
                    <span
                      v-text="
                        $i18n.locale === 'zh'
                          ? scope.row.musicAlbum.catalogueCname ||
                            scope.row.musicAlbum.catalogueName
                          : scope.row.musicAlbum.catalogueName
                      "
                    ></span>
                  </p>
                  <p v-else>
                    <span v-text="$t('public.noInformation')"></span>
                  </p>
                </template>
              </el-table-column>
            </el-table>
            <div class="page-wrap" v-show="isPage">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="recordParams.pageNum"
                :page-size="recordParams.pageSize"
                background
                hide-on-single-page
                layout="total, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="cover" v-if="currentSong.musicAlbum">
          <el-image
            :src="
              currentSong.musicAlbum.cover500 || currentSong.musicAlbum.cover200
            "
            fit="contain"
          >
            <div slot="placeholder" class="image-slot flex-center flex-column">
              <i class="iconfont el-icon-loading"></i>
              <p>{{ $t("public.loading") }}<span class="dot">...</span></p>
            </div>
            <div slot="error" class="image-slot flex-center">
              <img src="@/assets/images/defaultCover.png" />
            </div>
          </el-image>
          <div class="info">
            {{ $t("main.albumNo") }}：{{
              currentSong.musicAlbum.catalogueId || $t("public.noInformation")
            }}
          </div>
        </div>
      </div>
    </el-drawer>
    <!--弹窗界面-->
    <el-dialog
      width="20%"
      :title="$t(textMap[dialogStatus])"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <!-- 添加到单曲夹 -->
      <el-form
        v-if="this.dialogStatus == 'addSingles'"
        :model="addSingles"
        class="addSingles"
        :rules="rules"
        ref="addSingles"
      >
        <el-form-item prop="select">
          <el-select
            v-model="addSingles.select"
            clearable
            filterable
            :placeholder="$t('public.selectSingles')"
          >
            <el-option
              v-for="item in options"
              :key="item.dirId"
              :label="item.name"
              :value="item.dirId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="addSingles.select === '0'"
          :label="$t('public.newSingles')"
          prop="name"
        >
          <el-input
            class="input-new-tag"
            v-model="addSingles.name"
            maxlength="20"
            show-word-limit
            :placeholder="$t('main.enterSingleName')"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" v-if="dialogStatus !== 'share'" class="dialog-footer">
        <el-button class="clearBtn" @click.native="dialogFormVisible = false">{{
          $t("public.cancel")
        }}</el-button>
        <el-button type="primary" @click="createData(dialogStatus)">{{
          $t("public.save")
        }}</el-button>
      </div>
    </el-dialog>
    <!-- :playInfo="playList[0]" -->
    <!-- :playList="playList" -->
    <a-player :isDrawer="isDrawer" />
  </div>
</template>

<script>
import { mapMutations, mapGetters, mapActions } from "vuex";
import aPlayer from "@/components/common/aPlayer/Index";
import elTableInfiniteScroll from "el-table-infinite-scroll";
export default {
  inject: ["reload"],
  directives: {
    "el-table-infinite-scroll": elTableInfiniteScroll,
  },
  // props: {
  //   isPlayer: {
  //     type: Boolean,
  //     default: false,
  //   },
  // },
  data() {
    return {
      activeName: "first",
      checkAll: false,
      multipleSelection: [], //多选
      // 当前选中行
      // currentRow: null,
      // drawer: false,
      // 音频配置
      // playList: [
      //   {
      //     title: "我爱祖国.map3", //歌曲名称
      //     artist: "123", //演唱者
      //     lrc: "", //LRC 歌词或者歌词文件的 URL
      //     pic: "", //封面图片 URL
      //     src: "https://music.163.com/song/media/outer/url?id=1466598056.mp3", //音频文件的 URL
      //   },
      // ],
      isPage: false, //是否显示分页 / 加载更多
      fullscreenLoading: false, //数据载入动画
      recordList: [], //播放记录列表
      recordParams: {
        pageNum: 1,
        pageSize: 30,
      },
      // el-dialog相关
      textMap: {
        //添加与编辑界面
        // download: "public.passwordAuthentification", //this.$t('public.edit')
        addDisks: "main.addToRecordClip",
        share: "main.share",
        addSingles: "main.addToSingleClip",
      },
      options: [], //单曲夹/唱片夹弹框下拉
      dialogFormVisible: false, //弹窗
      dialogStatus: "", //编辑框界面切换
      //弹窗界面数据
      // download: {
      //   roleId: "0", //待定
      //   account: "",
      //   password: "",
      // },
      // 添加到单曲夹
      addSingles: {
        select: "",
        name: "",
      },
      flag: 0, // 用户操作后进行标记 播放列表-喜欢/添加单曲夹等
      total: 0, //总条数
    };
  },
  components: {
    aPlayer,
  },
  computed: {
    // "playList",
    ...mapGetters([
      "userInfo",
      "loginStatu",
      "currentSong",
      "playing",
      "currentIndex",
      "playLists",
      "isDrawer",
    ]),
    onRoutes() {
      return (
        this.$route.path.split("/")[1] === "classical" ||
        this.$route.path.split("/")[1] === "national" ||
        this.$route.path.split("/")[1] === "jazz" ||
        this.$route.path.split("/")[1] === "audio-book" ||
        this.$route.path.split("/")[1] === "album-detail" ||
        this.$route.path.split("/")[1] === "myMusic"
      );
    },
    // list() {
    //   return this.playList.map((i) => {
    //     return {
    //       title:
    //         this.$i18n.locale === "zh"
    //           ? i.trackCtitle || i.trackTitle
    //           : i.trackTitle,
    //       artist: i.composer
    //         ? i.composer
    //             .map((x) => {
    //               if (this.$i18n.locale === "zh" && x.fullCname) {
    //                 return x.fullCname;
    //               } else {
    //                 return x.fullName;
    //               }
    //             })
    //             .join("  ")
    //         : "无", //演唱者
    //       // lrc: "", //LRC 歌词或者歌词文件的 URL
    //       pic: i.musicAlbum.cover500, //封面图片 URL
    //       // src: "", //音频文件的 URL
    //       id: i.trackId,
    //       quality:
    //         i.hifi == 1
    //           ? "hifi"
    //           : i.kbps320 == 1
    //           ? "320"
    //           : i.kbps192 == 1
    //           ? "192"
    //           : i.kbps64
    //           ? "64"
    //           : "",
    //       moduleId: i.musicAlbum.moduleId,
    //     };
    //   });
    // },
    rules() {
      return {
        account: [
          {
            required: true,
            message: this.$t("public.accountEmpty"),
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: this.$t("public.passwordEmpty"),
            trigger: "blur",
          },
        ],
        select: [
          {
            required: true,
            message: this.$t("public.selectSingles"),
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: this.$t("public.SinglesCannotEmpty"),
            trigger: "blur",
          },
        ],
      };
    },
  },
  watch: {
    isDrawer(newVal) {
      if (newVal == true) {
        if (window.history && window.history.pushState) {
          // 向历史记录中插入了当前页
          history.pushState(null, null, document.URL);
          window.addEventListener("popstate", this.goBack, false);
        }
      } else {
        window.removeEventListener("popstate", this.goBack, false);
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    ...mapMutations({
      // setPlayList: "SET_PLAYLIST",
      setDrawer: "SET_DRAWER",
      setDialogLogin: "SET_DIALOGLOGIN",
      setPlayParentId: "SET_PLAY_PARENT_ID",
      setPlayClipId: "SET_PLAY_CLIP_ID",
      // setIsPlayer: "SET_ISPLAYER",
    }),
    ...mapActions([
      // 点击选择播放
      "selectPlay",
      // 点击播放全部
      "playAll",
      "playStatus",
      "clearPlayList",
      // 播放视频移除播放
      "stopPlay",
      "savePlayList",
    ]),
    // 点击浏览器返回触发事件
    goBack() {
      // console.log("点击了浏览器的返回按钮");
      this.setDrawer(false);
      // window.history.back();
      // history.pushState(null, null, document.URL);
    },
    //分页 每页条数
    handleSizeChange(val) {
      this.recordParams.pageSize = val;
      this.getPlayRecords();
    },
    //当前页
    handleCurrentChange(val) {
      this.recordParams.pageNum = val;
      this.recordList = [];
      this.getPlayRecords();
    },
    isdrawer() {
      if (this.isDrawer) {
        if (this.flag) this.reload();
        window.history.back();
        // this.setDrawer(false);
        // this.drawer = false;
      } else {
        if (!this.loginStatu) {
          this.setDialogLogin(true);
          return;
        }
        if (this.activeName === "second") {
          this.getPlayRecords();
        }
        this.setDrawer(true);
        this.flag = 0;
        // this.drawer = true;
      }
    },
    // tab切换
    handleClick(tab) {
      // this.multipleSelection = [];
      // this.isIndeterminate = false;
      if (tab.name == "first") {
        this.$refs.recordListTable.clearSelection();
      } else {
        this.$refs.playlistTable.clearSelection();
        if (!this.loginStatu) {
          this.setDialogLogin(true);
          return;
        } else {
          this.getPlayRecords();
        }
      }
      this.checkAll = false;
    },
    async getPlayRecords() {
      this.fullscreenLoading = true;
      try {
        let res = await this.$api.user.getPlayRecords(this.recordParams);
        if (res.code === 1000000) {
          this.recordList = res.source ? res.source : [];
          this.total = res.total;
          this.fullscreenLoading = false;
          if (res.size < 50 && res.size < res.total) {
            this.isPage = false;
          } else {
            this.isPage = true;
          }
        } else {
          this.fullscreenLoading = false;
          this.tableData = [];
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 全选
    handleCheckAllChange(val) {
      if (val) {
        if (this.activeName == "first") {
          this.playLists.forEach((row) => {
            this.$refs.playlistTable.toggleRowSelection(row, true);
          });
        } else {
          this.recordList.forEach((row) => {
            this.$refs.recordListTable.toggleRowSelection(row, true);
          });
        }
      } else {
        if (this.activeName == "first") {
          this.$refs.playlistTable.clearSelection();
        } else {
          this.$refs.recordListTable.clearSelection();
        }
      }

      // this.isIndeterminate = false;
    },
    // 列表单选选中触发事件
    // handleCurrentChange(val) {
    //   this.currentRow = val;
    //   // let arr = [];
    // },
    // 暂停
    play(type, item) {
      // if (!this.loginStatu) {
      //   this.setDialogLogin(true);
      //   return;
      // }
      if (this.currentSong.trackId == item.trackId && this.playing) {
        this.playStatus(false);
      } else {
        let list = [];
        if (this.activeName == "first") {
          // let list = arr.concat(this.playLists);
          list = this.playLists;
        } else {
          list = this.recordList;
        }
        this.selectPlay({
          list: list,
          index: item.trackId,
        });
        this.setPlayParentId(null);
        this.setPlayClipId(null);
        if (type == "playRecord") {
          this.savePlayList({
            list: [item],
            location: "start",
          });
        }
      }
      // if (type == "play" || type == "playRecord") {

      // } else if (type == "pause") {
      //   this.playStatus(false);
      // }
    },
    //多选事件
    handleSelectionChange(val) {
      let checkedCount = val.length;
      if (this.activeName == "first") {
        this.checkAll =
          checkedCount === this.playLists.length && this.playLists.length > 0;
        // this.isIndeterminate =
        //   checkedCount > 0 && checkedCount < this.playLists.length;
      } else {
        this.checkAll =
          checkedCount === this.recordList.length && this.recordList.length > 0;
        // this.isIndeterminate =
        //   checkedCount > 0 && checkedCount < this.recordList.length;
      }

      this.multipleSelection = val;
      // console.log(this.multipleSelection);
    },
    // 打开弹窗界面
    async openDialog(type) {
      if (!this.loginStatu) {
        this.setDialogLogin(true);
        return;
      }
      this.dialogStatus = type;
      let res;
      if (type == "addSingles") {
        if (this.multipleSelection.length > 0) {
          res = await this.$api.user.getDirList({ type: 2 });
          if (res.code === 1000000) {
            if (res.source && res.source.length > 0) {
              this.options = res.source;
              this.options.unshift({
                name: this.$t("public.newSingles"),
                dirId: "0",
              });
              this.addSingles.select = "";
            } else {
              this.options = [
                {
                  name: this.$t("public.newSingles"),
                  dirId: "0",
                },
              ];
              this.addSingles.select = "0";
            }
            this.dialogFormVisible = true;
            this.$nextTick(() => {
              this.$refs[type].resetFields();
              this.addSingles.name = "";
            });
          } else {
            this.$message({
              message: this.$t("public.singleFolderFailed"),
              type: "warning",
              offset: 46,
              duration: 2000,
              showClose: true,
            });
          }
        } else {
          this.$message({
            message: this.$t("public.selectAddSingle"),
            type: "warning",
            offset: 46,
            duration: 2000,
            showClose: true,
          });
        }
      }
    },
    //弹窗 提交按钮
    createData(type) {
      this.$refs[type].validate(async (valid) => {
        if (valid) {
          if (type == "addSingles") {
            let params;
            //单曲夹
            if (this.addSingles.select === "0") {
              let param = {
                name: this.addSingles.name,
                type: 2,
              };
              let res = await this.$api.user.addDir(param);
              if (res.code === 1000000) {
                params = {
                  userDirChildAdds: this.multipleSelection.map((item) => {
                    return Object.assign(
                      {},
                      {
                        moduleId: item.musicAlbum.moduleId,
                      },
                      { contentId: item.trackId }
                    );
                  }),
                  dirId: res.source,
                  type: 2,
                };
              } else if (res.code === 1700401) {
                this.$message({
                  message: this.$t("public.singleExists"),
                  type: "error",
                  offset: 46,
                  duration: 2000,
                  showClose: true,
                });
              }
            } else {
              params = {
                userDirChildAdds: this.multipleSelection.map((item) => {
                  return Object.assign(
                    {},
                    {
                      moduleId: item.musicAlbum.moduleId,
                    },
                    { contentId: item.trackId }
                  );
                }),
                dirId: this.addSingles.select,
                type: 2,
              };
            }
            let result = await this.$api.user.addDirChild(params);
            if (result.code === 1000000) {
              if (this.activeName == "first") {
                this.$refs.playlistTable.clearSelection();
              } else {
                this.$refs.recordListTable.clearSelection();
              }
              this.$message({
                message: this.$t("public.addSuccess"),
                offset: 46,
                type: "success",
                duration: 2000,
                showClose: true,
              });
              this.dialogFormVisible = false;
            } else {
              this.$message({
                message: this.$t("public.addFailed"),
                offset: 46,
                type: "error",
                duration: 2000,
                showClose: true,
              });
            }
          }
        }
      });
    },
    // 清空播放列表
    async openConfirm(type, item) {
      if (!this.loginStatu) {
        this.setDialogLogin(true);
        return;
      } else if (
        (type == "clearPlayList") | (type == "deletePlayRecord") &&
        this.multipleSelection == 0
      ) {
        this.$message({
          message: this.$t("public.selectSingleEmpty"),
          offset: 46,
          type: "warning",
          duration: 2000,
          showClose: true,
        });
        return;
      }
      let text = "";
      if (type == "clearPlayList") {
        text = this.$t("public.sureClearPlaylist");
      } else if (type == "deletePlayRecord") {
        text = this.$t("public.deletePlayback");
      } else if (type == "cancelComposition" || type == "cancelRecord") {
        if (this.currentSong.trackId === item.trackId && this.playing) {
          this.$message({
            message: this.$t("public.cannotDeleteCurrentlyPlaying"),
            offset: 46,
            type: "warning",
            duration: 2000,
            showClose: true,
          });
          return;
        } else if (this.currentSong.trackId === item.trackId) {
          this.selectPlay({
            list: [],
            index: "0",
          });
        }
        // text = "确定移出播放列表吗?";
        if (type == "cancelComposition") this.clearPlayList([item]);
        else
          await this.$api.user.deletePlayRecord({
            contentIds: [item.trackId],
            selectState: 2,
          });
        this.getPlayRecords();
        return;
      }
      this.$confirm(text, {
        confirmButtonText: this.$t("public.confirm"),
        cancelButtonText: this.$t("public.cancel"),
        showClose: false,
        center: true,
      })
        .then(async () => {
          if (type == "clearPlayList") {
            // 播放列表包含 当前播放歌曲
            let idx;
            const flag = this.multipleSelection.some((item, index) => {
              if (item.trackId === this.currentSong.trackId) {
                idx = index;
                return true;
              }
            });
            // 包含并播放状态 -不清空
            if (flag && this.playing) {
              if (this.multipleSelection.length == 1) {
                this.$message({
                  message: this.$t("public.cannotDeleteCurrentlyPlaying"),
                  offset: 46,
                  type: "warning",
                  duration: 2000,
                  showClose: true,
                });
                return;
              }
              this.multipleSelection.splice(idx, 1);
              this.clearPlayList(this.multipleSelection);
              // 设置播放列表为当前播放歌曲(循环播放)
              this.selectPlay({
                list: [this.currentSong],
                index: this.currentSong.trackId,
              });
            } else if (flag) {
              this.stopPlay(); //移除播放信息
              this.clearPlayList(this.multipleSelection);
            } else {
              this.clearPlayList(this.multipleSelection);
            }
            // if (this.currentSong)
            // this.clearPlayList(this.multipleSelection);
            this.checkAll = false;
          } else if (type === "deletePlayRecord") {
            // 播放列表包含 当前播放歌曲
            let idx;
            let isCheckAll = true;
            const flag = this.multipleSelection.some((item, index) => {
              if (item.trackId === this.currentSong.trackId) {
                idx = index;
                return true;
              }
            });
            // 包含并播放状态 -不清空
            if (flag && this.playing) {
              if (this.multipleSelection.length == 1) {
                this.$message({
                  message: this.$t("public.cannotDeleteCurrentlyPlaying"),
                  offset: 46,
                  type: "warning",
                  duration: 2000,
                  showClose: true,
                });
                return;
              }
              this.multipleSelection.splice(idx, 1);
              isCheckAll = false;
              // 设置播放列表为当前播放歌曲(循环播放)
              this.selectPlay({
                list: [this.currentSong],
                index: this.currentSong.trackId,
              });
            } else if (flag) {
              this.selectPlay({
                list: [],
                index: "0",
              });
            }
            let params = {
              contentIds: this.multipleSelection.map((item) => {
                return item["trackId"];
              }),
              selectState: this.checkAll && isCheckAll ? 1 : 2,
            };
            await this.$api.user.deletePlayRecord(params);
            this.getPlayRecords();
          }
          //  else if (type == "cancelComposition") {
          //   this.clearPlayList([item]);
          // }
          this.$message({
            message: this.$t("public.successfullyDelete"),
            offset: 46,
            type: "success",
            duration: 2000,
            showClose: true,
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 是否添加我喜欢   单曲
    async isLikeSingle(item) {
      if (!this.loginStatu) {
        this.setDialogLogin(true);
        return;
      }
      // 点击喜欢后 添加标记- 用于刷新数据
      this.flag = 1;
      let playList;
      if (item.likeState) {
        let params = {
          contentIds: item.trackId,
          selectState: 2, //未全选
          type: 1,
        };
        this.$message({
          message: this.$t("public.singleRemovedFavorite"),
          type: "success",
          offset: 46,
          duration: 2000,
          showClose: true,
        });
        await this.$api.user.cancelComposition(params);
        // if (this.activeName == "first") {
        // this.playLists[index].likeState = 0;
        playList = (this.playLists || []).map((val) => {
          if (val.trackId == item.trackId) {
            val.likeState = 0;
          }
          return val;
        });
        // }
      } else {
        let params = {
          contentId: item.trackId,
          moduleId: item.musicAlbum.moduleId,
        };
        this.$message({
          message: this.$t("public.singleAddedLikes"),
          type: "success",
          offset: 46,
          duration: 2000,
          showClose: true,
        });
        await this.$api.user.addComposition(params);
        // if (this.activeName == "first") {
        // this.playLists[index].likeState = 1;
        playList = (this.playLists || []).map((val) => {
          if (val.trackId == item.trackId) {
            val.likeState = 1;
          }
          return val;
        });
        // }
      }
      localStorage.setItem("__playList__", JSON.stringify(playList));
      if (this.activeName == "second") {
        this.getPlayRecords();
      }
    },
    // 加载更多
    load() {
      this.recordParams.pageSize += 20;
      this.getPlayRecords();
    },
  },
};
</script>
<style lang="scss" scoped>
.openList {
  width: 54px;
  height: auto;
  display: flex;
  align-items: center;
  background: #a1322c;
  padding: 10px 0;
  color: #fff;
  border-radius: 6px 0px 0px 6px;
  cursor: pointer;
  position: fixed;
  top: 40%;
  right: 0;
  // margin-right: 5px;
  z-index: 9998;
  > li {
    width: 50%;
    line-height: 20px;
    text-align: center;
  }
  &.openList-en {
    width: 100px;
    height: 80px;
    > li {
      width: 70%;
      text-align: start;
      &:first-child {
        width: 30%;
      }
    }
  }
}
.drawer-box {
  top: 60px;
  .container {
    width: 1200px;
    margin: 20px auto;
    margin-bottom: 180px;
    display: flex;
    justify-content: space-between;
  }
  .content {
    width: 885px;
    .el-tab-pane {
      > h6 {
        margin: 14px 0 24px 0;
        cursor: pointer;
      }
      > .checkAll {
        margin: 24px 0;
        .el-checkbox {
          color: #333333;
          font-weight: bold;
        }
        .el-button,
        .icon-button {
          margin-left: 56px;
        }
      }
      > p {
        height: 60px;
        line-height: 60px;
        padding: 0 16px;
        margin-bottom: 16px;
        background-color: #f5f5f5;
      }
    }
    .el-table {
      .el-table__body {
        .el-table__row {
          i {
            cursor: pointer;
            color: #a1322c;
          }
        }
      }
    }
  }
  .cover {
    width: 224px;
    margin: 80px auto;
    .el-image {
      height: 224px;
      width: 100%;
      background-color: #d9d9d9;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .info {
      text-align: center;
      margin-top: 20px;
    }
  }
}
.page-wrap {
  float: right;
  // margin: 20px 0;
}
.el-select {
  width: 100%;
}
</style>
